(function ($) {
    $.fn.KyersAutoComplete = function (options) {
        var defaults = { "dropdownid": "search-dropdown" };
        var settings = $.extend(defaults, options || {});
        var jsonString = [
                { "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 1 nè", "description": "Đây là test lần 1", "url": "http://google.com" },
                { "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 2 nè", "description": "Đây là test lần 2", "url": "http://google.com" },
                { "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 3 nè", "description": "Đây là test lần 3", "url": "http://google.com" },
				{ "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 4 nè", "description": "Đây là test lần 4", "url": "http://google.com" },
                { "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 1 nè", "description": "Đây là test lần 1", "url": "http://google.com" },
                { "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 2 nè", "description": "Đây là test lần 2", "url": "http://google.com" },
                { "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 3 nè", "description": "Đây là test lần 3", "url": "http://google.com" },
				{ "images": "../Content/ImgResource/Evolution-Armchair-230x170.jpg", "title": "Test lần 4 nè", "description": "Đây là test lần 4", "url": "http://google.com" }
	];
        var $thistextbox = $(this);
        var $drwid = "";
        if (settings.dropdownid.length > 1) {
            $(this).after('<div id="' + settings.dropdownid + '"></div>');
        }
        $(this).on("keyup", function (e) {
            $drwid = "#" + settings.dropdownid;
            var $showdr = $($drwid);
            if (e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 39 && e.keyCode !== 37) {
                if ($thistextbox.val().length <= 2) {
                    $showdr.removeClass("active").children().remove();
                }
            }
        });
        $(document).on("click", function (e) {
            $drwid = "#" + settings.dropdownid;
            var $showdr = $($drwid);
            if (!$(e.target).closest($thistextbox, $drwid).length) {
                $showdr.removeClass("active").children().remove();
            }
        });
        $(this).bind('change keydown', function (e) {
            $drwid = "#" + settings.dropdownid;
            var $showdr = $($drwid);
            $(this).checkArrowUpDown({ "drSearch": $drwid, "e": e });
            if (e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 39 && e.keyCode !== 37) {
                if ($thistextbox.val().length >= 2) {
                    $showdr.find("ul").remove();
                    $($drwid).addClass("active");
                    var htmlStr = '<div class="auto-dropdown-arrow"></div><ul class="auto-dropdwon-ul">';
                    $.each(jsonString, function (eIndex, jData) {
                        htmlStr += '<li class="dropdown-li">';
                        htmlStr += '<a class="atcp-ahref" href="' + jData.url + '">';
                        htmlStr += '<div class="atcp-img"><img src="' + jData.images + '"/></div>';
                        htmlStr += '<div class="atcp-infor-block"><span class="atcp-title">' + jData.title + '</span>';
                        htmlStr += '<span class="atcp-description">' + jData.description + '</span></div>';
                        htmlStr += '</a>';
                        htmlStr += '</li>';
                    });
                    htmlStr += '</ul>';
                    $showdr.append(htmlStr).addClass("active");
                    $showdr.find("ul").perfectScrollbar({
                        wheelSpeed: 20,
                        wheelPropagation: false,
                        suppressScrollX: true,
                        tagScroll: "li"
                    });
                    if (e.keyCode == 13) {
                        $showdr.removeClass("active").children().remove();
                    }
                }
            }
        });

        $.fn.checkArrowUpDown = function (option) {
            var def = { "drSearch": "#search-dropdown" };
            var setng = $.extend(def, option || {});
            var chooseItem = $(setng.drSearch).find(".dropdown-li.focus");
            var eItem = $(setng.drSearch).find(".dropdown-li");
            var e = setng.e;
            if (e.keyCode === 40 || e.keyCode === 39) { // down
                if (chooseItem.length === 0) {
                    eItem.first().addClass("focus");
                }
                else if (chooseItem.length !== 0) {
                    if (chooseItem.next().length === 0) {
                        eItem.removeClass("focus");
                        eItem.first().addClass("focus");
                    }
                    else {
                        chooseItem.next().addClass("focus");
                        chooseItem.removeClass("focus");
                    }
                }
                $(this).val($(setng.drSearch).find(".dropdown-li.focus").find(".atcp-title").text());
            }
            if (e.keyCode === 38 || e.keyCode === 37) { // up
                if (chooseItem.length === 0) {
                    eItem.last().addClass("focus");
                }
                else if (chooseItem.length !== 0) {
                    if (chooseItem.prev().length === 0) {
                        eItem.removeClass("focus");
                        eItem.last().addClass("focus");
                    }
                    else {
                        chooseItem.prev().addClass("focus");
                        chooseItem.removeClass("focus");
                    }
                }
                $(this).val($(setng.drSearch).find(".dropdown-li.focus").find(".atcp-title").text());
            }
        }
    };
})(jQuery);